<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>明德后台管理系统</title>
  <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  <style>
    .c-gray {
      color: #ccc;
    }

    .c-green {
      color: green;
    }

    .c-red {
      color: red;
    }

    .photo {
      width: 300px;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .photo img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    /* #nprogress .bar {
      background-color: red;
    } */
  </style>
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <!-- 引入公共页面 -->
    {{include "./common/header.html" }}

    <!-- 引入公共页面 -->
    {{include "./common/side-menu.html" }}

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
        <span class="layui-breadcrumb" lay-separator="/">
          <a href="/">首页</a>
          <a href="/article">分类列表</a>
        </span>
        <div style="line-height: 50px;">
          <a href="/addCate" class="layui-btn">添加分类</a>
        </div>

        <div style="text-align:center ">
        </div>
        <div>
          <table align="center" width="1300px" border="1px" rules="all" class="layui-table">
            <thead>
              <tr>
                <td>序号</td>
                <td width="200px">分类名</td>
                <td>是否显示前台</td>
                <td>添加时间</td>
                <td>更新时间</td>
                <td>操作</td>
              </tr>
            </thead>
            <tbody id='aaa'>

            </tbody>

          </table>
          <div id="test1"></div>
        </div>
      </div>
    </div>

  </div>
  <script src="/static/js/jquery.js"></script>
  <script src="/static/plugins/layui/layui.js"></script>

  <script>


    const isShowTextMap = {
      0: "<span style='color:gray'>不显示</span>",
      1: "<span style='color:green'>显示</span>",
    }

    $(function () {
      // 加载分类
      loadCate();
    })

    function loadCate() {
      console.log(111)
      // NProgress.start(); // 开启进度条 等价于  NProgress.set(0)
      // NProgress.set(0.4);
      $.get("/getCateData", function (res) {
        console.log(111)
        // NProgress.done(); // 关闭进度条
        // 动态构造tr标签
        let tbodyHtml = '';
        res.forEach((cate, index) => {
          let { cate_id, cate_name, is_show, add_date, update_date } = cate;
          is_show = isShowTextMap[is_show];
          tbodyHtml += `<tr>
                <td>${index + 1}</td>
                <td width="200px">${cate_name}</td>
                <td>${is_show}</td>
                <td>${add_date}</td>
                <td>${update_date}</td>
                <td>
                  <button type="button" data-catid='${cate_id}'  class="layui-btn  layui-btn-sm edit">编辑 <i class="layui-icon">&#xe642;</i></button>
                  <button type="button" data-catid='${cate_id}' class="layui-btn  layui-btn-sm  layui-btn-danger delete">删除  <i class="layui-icon">&#xe640;</i></button>
                </td>
          </tr>`
          // 塞到tbody中
          // $("#tbody").html(tbodyHtml)
          let aaa = document.getElementById('aaa');
          aaa.innerHTML = tbodyHtml
        })
      }, 'json')
    }

    // 删除操作(对于动态新增的元素绑定事件需要用事件委托（代理）)
    $("tbody").on('click', '.delete', function () {
      //询问框
      let _that = this
      layer.confirm('确认删除吗', {
        btn: ['是的', '取消'] //按钮
      }, function () {
        // 获取当前要删除的分类的id
        let cat_id = $(_that).attr('data-catid')
        $.post('/deleteCate', { cat_id }, function (res) {
          let { message, code } = res
          layer.msg(message)
          if (code === 20000) {
            console.log('成功');
            // 重新加载分类
            loadCate();
          }
        }, 'json')
      }, function () {

      });

    })

    //编辑操作
    $("tbody").on('click', '.edit', function () {
      // 获取当前要删除的分类的id
      let cat_id = $(this).attr('data-catid')
      location.href = "/editCate?cat_id=" + cat_id;
    })

    //分页
    layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
        elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        , count: 20 //数据总数，从服务端得到
      });
    });

  </script>




</body>

</html>